<template>
  <div>
    <div class="contentDiv">
      <el-form :label-position="'top'" ref="ruleForm" label-width="80px" :model="formLabelAlign">
        <el-form-item 
          label="问题名称"
          prop="name"
          :rules="{
            required: true, message: '问题名称不能为空', trigger: 'blur'
          }"
        >
          <el-input v-model="formLabelAlign.name" placeholder='问题名称'></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址"
          prop="email"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]"
        >
          <el-input v-model="formLabelAlign.email" placeholder='邮箱地址'></el-input>
        </el-form-item>
        <el-form-item label="详情"
          prop="content"
          :rules="{
            required: true, message: '详情不能为空', trigger: 'blur'
          }"
        >
          <el-input type="textarea" placeholder='详情描述' v-model="formLabelAlign.content"></el-input>
        </el-form-item>
        <el-form-item label="类型" 
          prop="type"
          :rules="{
            required: true, message: '请选择所提交的问题类型', trigger: 'blur'
          }"
        >
          <el-radio-group v-model="formLabelAlign.type">
            <el-radio label="样式"></el-radio>
            <el-radio label="新功能"></el-radio>
            <el-radio label="Bug"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      
    </div>


  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  components: {
  },
  data(){
    return{
      formLabelAlign: {
        name: '',
        content: '',
        type: '',
        email: '',
      }
    }
  },
  mounted(){
    
  },
  methods:{
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('数据',this.formLabelAlign)
            // 1984440188@qq.com
            console.log('openid',this.$store.getters.openid)
            this.$Leancloud.dataRequest.push({
              ...this.formLabelAlign,
              openid:this.$store.getters.openid
            },'Suggestion',this)
            this.$refs[formName].resetFields();
            this.$notify({
              title: '提交成功',
              message: '感谢您的反馈！',
              type: 'success'
            });
          } else {
            console.log('error submit!!');
            return false;
          }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang="scss" scoped>
  .contentDiv{
    margin: 10px;
  }
</style>
